<template>
  <div class="singerdes" v-if="singerdesc">
    <span>
      <router-link to="/recommend">
        <img src="../assets/return.png" alt="" />
      </router-link>
    </span>
    <div class="singer">
      <div class="pic"><img :src="singerurl" /></div>
      <div class="briefdesc">{{ singerdesc.artist.briefDesc }}</div>
      <SongList @play="$emit('play', $event)" :songs="showList"></SongList>
    </div>
  </div>
</template>

<script>
import SongList from "@/components/SongList.vue";

export default {
  name: "SingerDes",
  props: ["hotid", "url"],
  data() {
    return {
      singerID: 0,
      singerdesc: null,
      singerurl: "",
      showList: null,
      showListBefore: [],
    };
  },
  components: {
    SongList,
  },
  created() {
    this.singerurl = this.$route.params.url;
    this.singerID = this.$route.params.hotid;
    // console.log(this.singerID);

    this.$http
      .get("/artists/", {
        params: {
          id: this.singerID,
        },
      })
      .then((d) => {
        this.singerdesc = d.data;
        this.showListBefore = d.data.hotSongs.map((dlist) => {
          let data = dlist;
          data.song = {
            artists: dlist.ar,
            privilege: {
              playMaxbr: dlist.privilege.maxbr,
            },
          };
          return data;
        });
        this.showList = this.showListBefore.slice(0, 20);
      });
  },
};
</script>

<style lang="less" scoped>
.singerdes {
  span {
    position: fixed;
    top: 70px;
    left: 15px;
    z-index: 8;
  }
  padding: 15px 15px 0px;
  width: 100vw;
  box-sizing: border-box;
  .singer {
    .pic {
      text-align: center;
      margin-top: 35px;
      height: 120px;
      img {
        height: 110px;
        width: 110px;
        border-radius: 50%;
        box-shadow: 0px 0px 10px 5px #8ac4d0;
      }
    }
    .briefdesc {
      border-top: 2px solid #f4d160;
      border-bottom: 2px solid #f4d160;
      margin: 25px 0px 15px;
      font-size: 15px;
      letter-spacing: 1px;
      position: relative;
      padding: 20px 10px 35px;
    }
    .briefdesc::before {
      content: "简介";
      position: absolute;
      background-color: white;
      width: 90px;
      font-weight: 550;
      border-left: 2px solid #f4d160;
      border-right: 2px solid #f4d160;
      top: -14px;
      left: 50%;
      margin-left: -45px;
      letter-spacing: 5px;
      font-size: 18px;
      text-align: center;
      padding-left: 5px;
    }
    .briefdesc::after {
      content: "热门作品";
      position: absolute;
      background-color: white;
      width: 100px;
      font-weight: 550;
      border-left: 2px solid #f4d160;
      border-right: 2px solid #f4d160;
      bottom: -14px;
      left: 50%;
      margin-left: -50px;
      letter-spacing: 5px;
      font-size: 18px;
      text-align: center;
      padding-left: 5px;
    }
  }
}
</style>